<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/dataTables.bootstrap.css}" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .control-label{
            margin-top: 5px;
        }
    </style>

</head>
<body>


<main class="container-fluid">
    <form class="form form-horizontal" method="post" action="" enctype="application/x-www-form-urlencoded">
        <div class="form-group">
            <label for="width" class="col-xs-4 control-label">宽度</label>
            <div class="col-xs-8">
            <input type="text" class="form-control" id="width" placeholder="默认使用源文件宽度">
            </div>
        </div>
        <div class="form-group">
            <label for="height" class="col-xs-4 control-label">高度</label>
            <div class="col-xs-8">
            <input type="text" class="form-control" id="height" placeholder="默认使用源文件高度">
            </div>

        </div>
        <div class="form-group">
            <label for="bitrate" class="col-xs-4 control-label">比特率</label>
            <div class="col-xs-8">
            <input type="text" class="form-control" id="bitrate" placeholder="默认使用源文件比特率">
            </div>

        </div>
        <div class="form-group">
            <label for="fps" class="col-xs-4 control-label">帧率</label>
            <div class="col-xs-8">
                    <select name="fps" class="form-control" id="fps">
                        <option value="">使用源文件帧率</option>
                        <option value="15">15帧 / s</option>
                        <option value="20">20帧 / s</option>
                        <option value="24">24帧 / s</option>
                        <option value="30">30帧 / s</option>
                        <option value="36">36帧 / s</option>
                        <option value="40">40帧 / s</option>
                        <option value="48">48帧 / s</option>
                        <option value="60">60帧 / s</option>
                    </select>
            </div>

        </div>
        <div class="form-group">
            <label for="vcodec" class="col-xs-4 control-label">视频编码</label>
            <div class="col-xs-8">
                <select name="vcodec" class="form-control" id="vcodec">
                    <option value="h264">H264</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="acodec" class="col-xs-4 control-label">音频编码</label>
                <div class="col-xs-8">
                    <select name="acodec" class="form-control" id="acodec">
                        <option value="mp2">MPEG2</option>
                        <option value="aac">AAC</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="form-group">
            <label for="extension" class="col-xs-4 control-label">文件格式</label>
            <div class="col-xs-8">
                <select class="form-control" id="extension">
                    <option>TS</option>
                </select>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">提交任务</button>
    </form>
</main>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.spring-friendly.min.js}"></script>

<script>
    $(document).ready(function () {

    });
</script>
</body>
</html>
